/**
 * 新品资料
 */
import * as React from 'react'
import { Card, Button, Form, Row, Col, Select, Cascader, Input } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, StandardTable } from '../../components'
import { exportExcel } from '../../service/api'
import '../../assets/style/TableList.less'
const FormItem = Form.Item
const Option = Select.Option

export interface State {
  formValues: any
  pagination: any
}

@Authentication
class NewInfo extends React.Component<any, State> {
  
  state = {
    pagination: {},
    formValues: {}
  }
  componentDidMount () {
    this.search({}, {})
  }

  handleFormReset = () => {
    const { form } = this.props
    form.resetFields()
    this.setState({
      formValues: {}
    })
    //获取波段列表
    this.search({}, {})
  }
  /**
   * 点击查询按钮
   */
  handleSearch = (e: any) => {
    e.preventDefault()
    const { form, data: { pagination } } = this.props
    form.validateFields((err: any, fieldsValue: any) => {
      if (err) return
      Object.assign(fieldsValue,{pageIndex: pagination.current})
      Object.assign(fieldsValue,{pageSize: pagination.pageSize})
      this.setState({
        formValues: fieldsValue,
        pagination,
      })
      this.search({
        ...fieldsValue
      }, pagination)
    })
  }
  /**
   * 调用查询方法
   */
  search (param: any , pageInfo: any) {
    const { list } = this.props
    const { pagination, formValues } = this.state
    list(param||formValues, pageInfo||pagination)
  }
  renderSimpleForm() {
    const { form, categorys, venders } = this.props
    const { getFieldDecorator } = form
    getFieldDecorator('dlid', { initialValue: [] })
    getFieldDecorator('style', { initialValue: [] })
    const changeCateGorys = (e: string []) => {
      let dlid = e[0]
      let style = ''
      if (e.length>1) style = e[1]
      form.setFieldsValue({
        dlid,
        style
      })
    }
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={5} sm={24}>
            <FormItem label="样衣编码">
              {getFieldDecorator('sampleid')(
                <Input placeholder="输入样衣编码" />)}
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="分类">
              <Cascader options={categorys} onChange = {changeCateGorys} changeOnSelect placeholder="请选择分类"/>
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="供应商">
              {getFieldDecorator('supplierid')(
                <Select placeholder="请选择供应商" allowClear showSearch>
                  {venders.map( (vender: any, index: number) => (<Option key={index} value={vender.Key}>{vender.Value}</Option>))}
                </Select>)}
            </FormItem>
          </Col>
          <Col md={5} sm={24}>
            <FormItem label="波段">
              {getFieldDecorator('band')(
                <Input placeholder="请输入波段"/>
              )}
            </FormItem>
          </Col>
          <Col md={4} sm={24}>
            <span className="submitButtons">
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    )
  }
  /**
   * 筛选或者更改分页
   */
  handleStandardTableChange = (pagination: any, filtersArg: any, sorter: any) => {
    const { formValues } = this.state
    let params: any = formValues
    params = {
      ...params,
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
    }
    this.setState({
      formValues: params,
      pagination,
    })
    this.search(params, pagination)
  }
  render () {
    const { loading, data } = this.props
    const columns: any [] = [
      {
        title: '样衣编码',
        dataIndex: 'sampleid',
        key: 'sampleid',
        width:"80px"
      }, {
        title: '波段',
        dataIndex: 'bandname',
        key: 'bandname',
        width:"80px"
      }, {
        title: '供应商id',
        dataIndex: 'supplierid',
        key: 'supplierid',
        width:"80px"
      },{
        title: '供应商名称',
        dataIndex: 'suppliername',
        key: 'suppliername',
        width:"150px"
      },  {
        title: '季节',
        dataIndex: 'seasonid',
        key: 'seasonid',
        width:"40px"
      },  {
        title: '风格',
        dataIndex: 'erpzlid',
        key: 'erpzlid',
        width:"80px"
      },{
        title: '款式定义',
        dataIndex: 'sampletype',
        key: 'sampletype',
        width:"70px"
      },{
        title: '小小类',
        dataIndex: 'erpxxlid',
        key: 'erpxxlid',
        width:"60px"
      },{
        title: '子类id',
        dataIndex: 'erpsonid',
        key: 'erpsonid',
        width:"100px"
      },{
        title: '子类名称',
        dataIndex: 'erpsonname',
        key: 'erpsonname',
        width:"120px"
      },{
        title: '供应商报价',
        dataIndex: 'offerprice',
        key: 'offerprice',
        width:"80px"
      },{
        title: '定价',
        dataIndex: 'lastprice',
        key: 'lastprice',
        width:"50px"
      },{
        title: '零售价',
        dataIndex: 'saleprice',
        key: 'saleprice',
        width:"60px"
      },{
        title: '货号',
        dataIndex: 'pcode',
        key: 'pcode',
        width:"60px"
      },{
        title: '颜色',
        dataIndex: 'colour',
        key: 'colour',
        width:"90px"
      },{
        title: '尺码',
        dataIndex: 'size',
        key: 'size',
        width:"180px"
      },{
        title: '产地',
        dataIndex: 'place',
        key: 'place',
        width:"50px"
      },{
        title: '安全类别',
        dataIndex: 'SECURITY',
        key: 'SECURITY',
        width:"130px"
      },{
        title: '执行标准',
        dataIndex: 'execut',
        key: 'execut',
        width:"110px"
      },{
        title: '面料成分',
        dataIndex: 'fabric',
        key: 'fabric',
        width:"120px"
      }
    ]
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <div className="tableList">
            <div className="tableListForm">{this.renderSimpleForm()}</div>
            <div className="tableListOperator">
              <Button icon="anticon anticon-download" type="primary" onClick = {() => exportExcel('/Scm/Sample/ExportGoodsInfo')}>
                导出
              </Button>
            </div>
            <StandardTable
            xscroll="2500px"
              rowKey = "sampleid"
              select = {false}
              loading={loading}
              data={data}
              columns={columns}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(NewInfo)